<template>
  <div class="qiyeguanxi">
    <!-- <div class="qiyeguanxiimg">
    </div> -->
    <div id="qiyeguanxichart" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts/dist/echarts";

import axios from "axios";

export default {
  name: "qiyeguanxi",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      axios({
        url: "http://39.103.184.219:19007/api/emp/getBid/140500925346824192",
        method: "post",
        headers: { "Content-Type": "application/json" },
        data: {
          current: 1,
          empId: "140500925346824192",
          limit: 10,
        },
      }).then((res) => {
        this.loadChart(res.data.data);
      });
    },
    loadChart(data) {
      let charts = echarts.init(document.getElementById("qiyeguanxichart"));
      let option = {
        title: {
          text: "企业采购关系图",
          textStyle: {
            color: "#10DAFF",
          },
        },
        tooltip: {
          formatter: function (x) {
            return x.data.des;
          },
        },
        series: [
          {
            type: "graph",
            layout: "force",
            symbolSize: 80,
            roam: true,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 20,
                },
              },
            },
            force: {
              repulsion: 2500,
              edgeLength: [10, 50],
            },
            draggable: true,
            itemStyle: {
              normal: {
                color: "#10DAFF",
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#10DAFF",
              },
            },
            edgeLabel: {
              normal: {
                show: true,
                formatter: function (x) {
                  return x.data.name;
                },
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {},
              },
            },
            data: [],
            links: [],
          },
        ],
      };

      console.log(data);

      option.series[0].data.push({
        name: data.parent.companyName,
      });
      data.children.map((item) => {
        option.series[0].data.push({
          name: item.companyName,
        });
      });

      data.children.map((item) => {
        option.series[0].links.push({
          source: data.parent.companyName,
          target: item.companyName,
          name: "分包",
        });
      });

      charts.setOption(option);
    },
  },
};
</script>
<style lang='scss' scoped>
.qiyeguanxiimg {
  background-image: url("/configuration/2d/guanxi.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.qiyeguanxi {
  padding: 0px 20px;
  width: 100%;
  // height: 100%;
  height: calc(100% - 30px);
  border-left: 2px solid #10daff;
  border-right: 2px solid #10daff;
  background-color: #5555;
  margin: 20px 0px;
}
</style>